<template>
  <div class="login-container">
    <el-row>
      <el-col :lg="14" :md="11" :sm="24" :xl="14" :xs="24">
        <div style="color: transparent">占位符</div>
      </el-col>
      <el-col :lg="9" :md="12" :sm="24" :xl="9" :xs="24">
        <el-form
          ref="loginForm"
          class="login-form"
          label-position="left"
          :model="loginForm"
        >
          <div class="title">hello !</div>
          <div class="title-tips">
            {{ translateTitle('欢迎来到') }}德毓
          </div>
          <el-form-item prop="username" style="margin-top: 40px">
            <el-input
              v-model.trim="loginForm.username"
              :placeholder="translateTitle('请输入用户名')"
              tabindex="1"
              type="text"
            >
              <template #prefix>
                 <span class="svg-container">
<!--                <icon-svg name="user"></icon-svg>-->
              </span>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              :key="passwordType"
              ref="password"
              v-model.trim="loginForm.password"
              :placeholder="translateTitle('请输入密码')"
              tabindex="2"
              :type="passwordType"
              @keyup.enter.native="handleLogin"
            >
              <template #prefix>
                  <span class="svg-container">
<!--                    <icon-svg name="password"></icon-svg>-->
                  </span>
              </template>
              <template v-if="passwordType === 'password'" #suffix>
                <span style="cursor:pointer" class="show-pwd" @click="showPwd">
            <icon-svg :name="passwordType === 'password' ? 'eye' : 'eye-open'"></icon-svg>
          </span>
              </template>
              <template v-else #suffix>
               <span style="cursor:pointer" class="show-pwd" @click="showPwd">
              <icon-svg :name="passwordType === 'password' ? 'eye' : 'eye-open'"></icon-svg>
          </span>
              </template>
            </el-input>
          </el-form-item>
          <el-button
            class="login-btn"
            :loading="loading"
            type="primary"
            @click="handleLogin"
          >
            {{ translateTitle('登录') }}
          </el-button>
        </el-form>
      </el-col>
      <el-col :lg="1" :md="1" :sm="24" :xl="1" :xs="24">
        <div style="color: transparent">占位符</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { validUsername } from '@/utils/validate'
  import { getUUID } from '@/utils'
  import { translateTitle } from '@/utils/i18n'
  import { getUrl, mRequest } from '@/utils/request'
  export default {
    name: 'Login',
    data () {
      const validateUsername = (rule, value, callback) => {
        if (!validUsername(value)) {
          return callback(new Error('用户名不能为空'))
        }
        return callback()
      }
      const validatePassword = (rule, value, callback) => {
        if (this.R.isNil(value) || this.R.equals(value, '')) {
          return callback(new Error('密码不能为空'))
        }
        return callback()
      }
      return {
        loginForm: {
          userName: '',
          password: '',
          captcha: '',
          uuid: ''
        },
        loginRules: {
          userName: [{ required: true, trigger: 'blur', validator: validateUsername }],
          password: [{ required: true, trigger: 'blur', validator: validatePassword }],
/*
          captcha: [{ required: true, trigger: 'blur', validator: validateCaptcha }]
*/
        },
        passwordType: 'password',
        capsTooltip: false,
        loading: false,
        showDialog: false,
        redirect: null,
        otherQuery: {},
        captchaPath: '',
      }
    },
    watch: {
      $route: {
        handler: function (route) {
          const query = route.query
          if (query) {
            this.redirect = query.redirect
            this.otherQuery = this.getOtherQuery(query)
          }
        },
        immediate: true
      }
    },
    methods: {
      translateTitle,
      checkCapslock ({ shiftKey, key } = {}) {
        if (key && key.length === 1) {
          this.capsTooltip = shiftKey && (key >= 'a' && key <= 'z') || !shiftKey && (key >= 'A' && key <= 'Z')
        }
        if (key === 'CapsLock' && this.capsTooltip === true) {
          this.capsTooltip = false
        }
      },
      showPwd () {
        if (this.passwordType === 'password') {
          this.passwordType = ''
        } else {
          this.passwordType = 'password'
        }
      },
      handleLogin () {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = true
            const params = {
              username: this.loginForm.username,
              password: this.loginForm.password,
              uuid: this.loginForm.uuid,
              captcha: this.loginForm.captcha
            }

            mRequest('loginApi/login', params, ({ data }) => {
              if (data && data.code === 0) {
                this.$cookie.set('token', data.token)
                this.$cookie.set('userId', data.userInfo.userId)
                this.$cookie.set('realName', data.userInfo.realName)
                console.log('realName---' + data.userInfo.realName)
                this.$router.replace({ path: this.redirect || '/', query: this.otherQuery })
              } else {
                this.loginForm.captcha = ''
                this.getCaptcha()
                this.$message.error(data.msg)
              }
              this.loading = false
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      getOtherQuery (query) {
        return Object.keys(query).reduce((acc, cur) => {
          if (cur !== 'redirect') {
            acc[cur] = query[cur]
          }
          return acc
        }, {})
      },
      getCaptcha () {
        this.loginForm.uuid = getUUID()
        this.captchaPath = getUrl('loginApi/captcha', { uuid: this.loginForm.uuid })
      }
    }
  }
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";
.login-container {
  height: 100vh;
  background: url('~@/assets/login_images/background.jpg') center center fixed
  no-repeat;
  background-size: cover;
}

.login-form {
  position: relative;
  max-width: 100%;
  padding: 4.5vh;
  margin: calc((100vh - 475px) / 2) 5vw 5vw;
  overflow: hidden;
  background: url('~@/assets/login_images/login_form.png');
  background-size: 100% 100%;

  .title {
    font-size: 54px;
    font-weight: 500;
    color: $base-color-white;
  }

  .title-tips {
    margin-top: 29px;
    font-size: 26px;
    font-weight: 400;
    color: $base-color-white;
  }

  .login-btn {
    display: inherit;
    width: 220px;
    height: 50px;
    margin-top: 5px;
    border: 0;

    &:hover {
      opacity: 0.9;
    }

    .forget-passwordword {
      width: 100%;
      margin-top: 40px;
      text-align: left;

      .forget-password {
        width: 129px;
        height: 19px;
        font-size: 20px;
        font-weight: 400;
        color: rgba(92, 102, 240, 1);
      }
    }
  }

  .tips {
    margin-bottom: 10px;
    font-size: $base-font-size-default;
    color: $base-color-white;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .title-container {
    position: relative;

    .title {
      margin: 0 auto 40px auto;
      font-size: 34px;
      font-weight: bold;
      color: $base-color-blue;
      text-align: center;
    }
  }

  i {
    position: absolute;
    top: 8px;
    left: 5px;
    z-index: $base-z-index;
    font-size: 16px;
    color: #d7dee3;
    cursor: pointer;
    user-select: none;
  }

  .show-password {
    position: absolute;
    right: 25px;
    left: -35px;
    font-size: 16px;
    color: #d7dee3;
    cursor: pointer;
    user-select: none;
  }

  :deep() {
    .el-form-item {
      padding-right: 0;
      margin: 20px 0;
      color: #454545;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 2px;

      &__content {
        min-height: $base-input-height;
        line-height: $base-input-height;
      }

      &__error {
        position: absolute;
        top: 100%;
        left: 18px;
        font-size: $base-font-size-small;
        line-height: 18px;
        color: $base-color-red;
      }
    }

    .el-input {
      box-sizing: border-box;

      input {
        height: 48px;
        padding-left: 35px;
        font-size: $base-font-size-default;
        line-height: 58px;
        background: #f6f4fc;
        border: 0;
      }
    }

    .code {
      position: absolute;
      top: 4px;
      right: 4px;
      cursor: pointer;
      border-radius: $base-border-radius;
    }
  }
}
</style>
